<template>
  <div>
    <el-dialog
      title="批量设置接警人"
      :visible.sync="dialogVisible"
      width="500px"
      :before-close="closeEditDialog"
      :close-on-click-modal="false"
      :append-to-body="true"
    >
      <el-form
        :model="alarmReceiveInfo"
        :rules="rules"
        ref="refSetInfo"
        label-width="100px"
      >
        <!-- <el-form-item size="small" label="姓名" prop="name">
                    <el-input clearable v-model.trim="alarmReceiveInfo.name"></el-input>
                </el-form-item>
                <el-form-item size="small" label="通知方式" prop="notifyType">
                    <el-checkbox-group v-model="alarmReceiveInfo.notifyType">
                        <el-checkbox label="公众号"></el-checkbox>
                        <el-checkbox label="电话"></el-checkbox>
                        <el-checkbox label="短信"></el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
                <el-form-item size="small" label="关联安装点" prop="address">
                    <el-input type="input" placeholder="关联安装点" maxlength="30" v-model.trim="alarmReceiveInfo.address">
                    </el-input>
                </el-form-item>
                <el-form-item size="small" label="手机号" prop="mobile">
                    <el-input type="input" placeholder="接警人管理手机号" maxlength="11" v-model.trim="alarmReceiveInfo.mobile">
                    </el-input>
                </el-form-item> -->

        <el-form-item
          size="small"
          label="一级接警人"
          prop="alarmReceiverIdList1"
        >
          <el-select
            v-model="alarmReceiveInfo.alarmReceiverIdList1"
            multiple
            :multiple-limit="6"
            placeholder="请选择"
            style="width: 100%"
            filterable
            @change="change1"
          >
            <el-option
              v-for="item in dataList"
              :key="item.id"
              :label="item.name + '：' + item.mobile"
              :value="item.id"
              :disabled="item.disabled"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item
          size="small"
          label="二级接警人"
          prop="alarmReceiverIdList2"
        >
          <el-select
            v-model="alarmReceiveInfo.alarmReceiverIdList2"
            multiple
            :multiple-limit="6"
            placeholder="请选择"
            style="width: 100%"
            filterable
            @change="change1"
          >
            <el-option
              v-for="item in dataList"
              :key="item.id"
              :label="item.name + '：' + item.mobile"
              :value="item.id"
              :disabled="item.disabled"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item
          size="small"
          label="三级接警人"
          prop="alarmReceiverIdList3"
        >
          <el-select
            v-model="alarmReceiveInfo.alarmReceiverIdList3"
            multiple
            :multiple-limit="6"
            placeholder="请选择"
            style="width: 100%"
            filterable
            @change="change1"
          >
            <el-option
              v-for="item in dataList"
              :key="item.id"
              :label="item.name + '：' + item.mobile"
              :value="item.id"
              :disabled="item.disabled"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item
          size="small"
          label="四级接警人"
          prop="alarmReceiverIdList4"
        >
          <el-select
            v-model="alarmReceiveInfo.alarmReceiverIdList4"
            multiple
            :multiple-limit="6"
            placeholder="请选择"
            style="width: 100%"
            filterable
            @change="change1"
          >
            <el-option
              v-for="item in dataList"
              :key="item.id"
              :label="item.name + '：' + item.mobile"
              :value="item.id"
              :disabled="item.disabled"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="closeEditDialog" class="cancel-button"
          >取 消</el-button
        >
        <el-button
          size="small"
          @click="editSubmit"
          v-preventReClick="1000"
          class="confirm-button"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { reqAddBatchReceiver, reqAlarmReceiverList } from "@/api/api";
import { mapState } from "vuex";

export default {
  name: "add",
  props: ["batchDate", "orgId"],
  data() {
    return {
      dialogVisible: false,
      dataList: [],
      alarmReceiveInfo: {
        alarmReceiverIdList1: [],
        alarmReceiverIdList2: [],
        alarmReceiverIdList3: [],
        alarmReceiverIdList4: [],
      },
      // 表单验证规则
      rules: {
        alarmReceiverIdList1: [
          {
            required: true,
            message: "请选择一级接警人",
            trigger: ["blur", "change"],
          },
        ],
      },
    };
  },
  computed: {
    ...mapState(["user"]),
  },
  methods: {
    change1(e) {
      if (e) {
        let list = [
          ...this.alarmReceiveInfo.alarmReceiverIdList1,
          ...this.alarmReceiveInfo.alarmReceiverIdList2,
          ...this.alarmReceiveInfo.alarmReceiverIdList3,
          ...this.alarmReceiveInfo.alarmReceiverIdList4,
        ];
        // console.log(list);
        this.dataList.forEach((item) => {
          item.disabled = false;
          list.forEach((item2) => {
            if (item.id == item2) {
              item.disabled = true;
            }
          });
        });
      }
    },
    // 获取接警人列表
    async getDataList() {
      const res = await reqAlarmReceiverList(1, 100, {
        userId: this.user.userId,
        roleName: this.user.roleName,
        orgId: this.orgId,
      });
      if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
      //   console.log(res);
      this.dataList = res.data.rows;
    },
    openMap() {
      this.isShowMap = true;
    },
    // 点击修改
    editSubmit() {
      this.$refs.refSetInfo.validate(async (valid) => {
        if (valid) {
          const res = await reqAddBatchReceiver({
            spaceIdList: this.batchDate,
            alarmReceiverIdList1: this.alarmReceiveInfo.alarmReceiverIdList1,
            alarmReceiverIdList2: this.alarmReceiveInfo.alarmReceiverIdList2,
            alarmReceiverIdList3: this.alarmReceiveInfo.alarmReceiverIdList3,
            alarmReceiverIdList4: this.alarmReceiveInfo.alarmReceiverIdList4,
          });
          if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
          this.$modal.notifySuccess("批量设置接警人成功");
          this.dialogVisible = false;
          this.$parent.getreqParkList();
          this.$parent.clearSelections(); //清空复选框
        }
      });
    },
    // 点击关闭弹框
    closeEditDialog() {
      this.$refs.refSetInfo.resetFields();
      this.dialogVisible = false;
      this.alarmReceiveInfo = {
        alarmReceiverIdList1: [],
        alarmReceiverIdList2: [],
        alarmReceiverIdList3: [],
        alarmReceiverIdList4: [],
      };
    },
  },
  deactivated() {
    if (this.$refs.refSetInfo != null) {
      this.closeEditDialog();
    }
  },
};
</script>

<style lang="less" scoped>
@import url("../../common.less");
</style>
